<template>
	<view class="gift">
		<!-- tab选项栏 -->
		<view class="tab_list">
			<view :class="['tab_item',showType?'active':'']" @click="changeShow(true)">
				列表显示
			</view>
			<view :class="['tab_item',!showType?'active':'']" @click="changeShow(false)">
				地图显示
			</view>
		</view>
		<!-- 地图组件 -->
		<view v-if="!showType">
			<view class="map_container">
				<map scale="14" ShopName="" class="map" :latitude="latitude" :longitude="longitude" :markers="covers"
					@markertap="tapMaker"></map>
			</view>
			<view class="bottom" v-if="!showType && showBottom">
				<!-- 店铺信息 -->
				<view class="store_info">
					<view class="img_box">
						<image :src="introduce.ShopImgs" mode="aspectFill"></image>
					</view>
					<view class="store_info_right">
						<text class="store_Shopname">{{introduce.ShopName}}</text>
						<text class="store_Address">{{introduce.Address}}</text>
						<text class="distance">距离: {{introduce.Distance}}km</text>
					</view>
				</view>
				<!-- 导航按钮 -->
				<view class="navigation">
					<button class="normal" style="width: auto;">A4打印：{{introduce.OriginalPrice}}元</button>
					<button class="print" @click="showChanged">我要打印</button>
					<button class="naviga" @click="toStore">我要导航</button>
				</view>
			</view>
		</view>
		<!-- 店铺列表 -->
		<view class="block">

		</view>
		<view class="shop_list" v-if="showType">
			<view class="tips">仅展示附近10公里内店铺</view>
			<view class="shop_item" v-for="(item,index) in shopList" :key="index" @click="chooseStore(index)">
				<view class="top">
					<view style="display: flex; ">
						<image class="icon" src="https://mg-print.oss-cn-shenzhen.aliyuncs.com/img/shop_img.png">
						</image>
						<text style="flex: 1;">{{item.ShopName}}</text>
					</view>
					<view class="distance">距离{{item.Distance }}km</view>
				</view>
				<!-- <view class="center">
					<image class="icon" src="https://mg-print.oss-cn-shenzhen.aliyuncs.com/img/clock.png"></image>
					<text>{{item.BusinessHours}}</text>
				</view> -->
				<view class="bottom_box">
					<image class="icon" src="https://mg-print.oss-cn-shenzhen.aliyuncs.com/img/location.png"></image>
					<text class="address">{{item.Address}}</text>
				</view>
				<view class="bottom_box">
					<!-- <image class="icon" src="https://mg-print.oss-cn-shenzhen.aliyuncs.com/img/location.png"></image> -->
					<text :class="['address',item.IsState=='false'?'off_line':' on_line ']">{{item.IsState=='false'?' 离线':'在线'}}</text>
				</view>
			</view>
		</view>
		<u-modal :show="showEditModal" title="温馨提示" @confirm="confirm" showCancelButton @cancel="showEditModal=false">
			<view class="slot-content">
				<text>你要切换到{{shopList[currentIndex].ShopName}}吗?</text>
			</view>
		</u-modal>

		<u-modal :show="showChange" title="温馨提示" @confirm="confirm2" showCancelButton @cancel="showChange=false">
			<view class="slot-content">
				<text>你要切换到{{introduce.ShopName}}吗?</text>
			</view>
		</u-modal>
		<!-- 选择店铺 -->
		<!-- <selectShop></selectShop> -->
		<!-- 上传方式 -->
		<!-- <chooseFile></chooseFile> -->
	</view>
</template>

<script>
	import chooseFile from '@/components/chooseFile/chooseFile.vue';
	import selectShop from '@/components/selectShop/selectShop.vue';
	export default {
		components: {
			chooseFile,
			selectShop
		},
		data() {
			return {
				showChange: false,
				showEditModal: false,
				currentIndex: 0,
				PageIndex: 1,
				PageSize: 10,
				shopList: [],
				showType: true,
				showBottom: false,
				latitude: 39.909,
				longitude: 116.39742,
				currentId: 0,
				covers: [],
				introduce: {},
			}
		},
		onLoad() {
			this.getList()
		},
		onReachBottom() {
			this.PageIndex++;
			this.getList();
		},

		methods: {
			showChanged() {
				this.showChange = true
			},

			confirm() {
				this.showEditModal = false
				if (this.currentIndex == 0) {
					this.shopList[this.currentIndex].isFirst = true
				}
				this.$store.commit('setStoreInfo', this.shopList[this.currentIndex]);
				uni.switchTab({
					url: `/pages/tab/home`
				})
				this.$store.commit('setNeedScan',false)
			},
			confirm2() {
				this.showChange = false
				this.$store.commit('setStoreInfo', this.introduce);
				uni.switchTab({
					url: `/pages/tab/home`
				})
				this.$store.commit('setNeedScan',false)
			},
			chooseStore(index) {
				this.showEditModal = true
				this.currentIndex = index
			},
			async getList() {
				let obj = {
					PageIndex: this.PageIndex,
					PageSize: this.PageSize
				}
				const that = this
				uni.getLocation({
					type: 'wgs84',
					success: async function(res) {
						that.longitude = res.longitude
						that.latitude = res.latitude
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
						obj.Latitude = res.latitude
						obj.Longitude = res.longitude
						console.log(obj);
						uni.showLoading({
							title: '加载中'
						});
						let result = await that.$api.post('Shops/List', obj);
						result.data.forEach((item, index) => {
							that.covers.push({
								id: that.covers.length,
								latitude: item.Latitude,
								longitude: item.Longitude,
								iconPath: 'https://mg-print.oss-cn-shenzhen.aliyuncs.com/img/covers_icon.png',
								width: 40,
								height: 40,
								callout: {
									content: `${item.ShopName}\n距离:${item.Distance}km`,
									color: '#FFF',
									bgColor: '#333333',
									borderRadius: 10,
									padding: 12,
									fontSize: 13,
									display: 'ALWAYS' // 总是显示 callout
								}
							})
						})
						uni.hideLoading();
						console.log(result.data);
						that.shopList = [...that.shopList, ...result.data]
						console.log(that.shopList);
					},
					fail: async function() {
						uni.showLoading({
							title: '加载中'
						});
						let result = await that.$api.post('Shops/List', obj);
						result.data.forEach((item, index) => {
							that.covers.push({
								id: index,
								latitude: item.Latitude,
								longitude: item.Longitude,
								iconPath: 'https://mg-print.oss-cn-shenzhen.aliyuncs.com/img/covers_icon.png',
								width: 40,
								height: 40,
								callout: {
									content: `${item.ShopName}\n距离:${item.Distance}km`,
									color: '#FFF',
									bgColor: '#333333',
									borderRadius: 10,
									padding: 12,
									fontSize: 13,
									display: 'ALWAYS' // 总是显示 callout
								}
							})
						})
						uni.hideLoading();
						that.shopList = [...that.shopList, ...result.data]
						console.log(that.shopList);
						that.$store.commit('setStoreInfo', that.shopList[0]);
						// that.getShopSale()
					}
				});

			},
			changeShow(bol) {
				this.showType = bol
			},
			tapMaker(e) {
				console.log(e);
				this.showBottom = true
				this.currentId = e.detail.markerId
				this.introduce = this.shopList[e.detail.markerId]
				console.log(this.introduce);
			},
			toStore() {
				// 找到id一样的，方便导航
				let that = this
				uni.openLocation({
					latitude: that.introduce.Latitude,
					longitude: that.introduce.Longitude,
					success: function() {

					}
				});
			}
		}
	};
</script>

<style>
	page {
		background-color: #f5f6f7;
	}
</style>

<style lang="scss" scoped>
	.on_line{
		color: #00BA82;
		font-size: 24rpx;
		box-sizing: content-box;
		padding: 5rpx 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #E5F8F2;
		border-radius: 8rpx;
		margin-top: 20rpx;
		margin-left: 20rpx;
	}
	.off_line{
		color: #666666;
		font-size: 24rpx;
		box-sizing: content-box;
		padding: 5rpx 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 8rpx;
		background: #F6F6F6;
		margin-top: 20rpx;
		margin-left: 20rpx;
	}
	.tips {
		text-align: center;
		color: #999999;
		font-size: 28rpx;
		margin: 20rpx 0;
	}

	.shop_list {
		width: 700rpx;
		margin: 0 auto;
		padding-bottom: 10rpx;
	}

	.block {
		height: 100rpx;
	}

	.icon {
		width: 40rpx;
		height: 40rpx;
		margin-right: 15rpx;
	}

	.shop_item {

		.top {
			display: flex;
			justify-content: space-between;
			// align-items: center;

			.distance {
				font-size: 28rpx;
				color: #9b9b9b;
				min-width: 170rpx;
				// flex: 1;
				text-align: right;
			}
			margin-bottom: 20rpx;
		}

		.center {
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;
		}
		
		.bottom_box {
			.address {
				font-size: 28rpx;
			}

			display: flex;
			align-items: center;
		}

		display: flex;
		flex-direction: column;
		// height: 200rpx;
		padding: 20rpx;
		justify-content: space-between;
		background-color: #ffffff;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
	}

	.tab_list {

		position: fixed;
		align-items: center;
		display: flex;
		width: 100%;
		justify-content: space-evenly;
		z-index: 99;
		height: 100rpx;
		background-color: white;

		.active {
			color: #3572FE;
			border-bottom: 4rpx solid #3572FE;
		}

		.tab_item {
			height: 100%;
			display: flex;
			align-items: center;

		}
	}

	.navigation {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		margin-top: 20rpx;

		.normal {
			color: black;
			background: ghostwhite;
			margin-right: 24rpx;
		}

		.print {
			color: white;
			background: #3572FE;
			margin-right: 24rpx;
		}

		.naviga {
			color: #3572FE;
			background-color: white;
			border: 1rpx solid #3572fe;
		}

		button {
			width: 144rpx;
			height: 56rpx;
			border-radius: 8rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 24rpx;
		}

	}

	.store_info {
		display: flex;
		align-items: center;

		.img_box {
			height: 136rpx;
			width: 136rpx;
			background-color: #f2f6ff;
			margin-right: 24rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.store_info_right {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			height: 100%;
			flex: 1;
			.store_Shopname {
			    font-weight: bold;
			    font-size: 32rpx;
			    color: #333333;
			    word-wrap: break-word; /* 允许单词换行 */
			    overflow-wrap: break-word; /* 兼容性 */
			    max-width: 100%; /* 限制最大宽度 */
			}


			.store_Address {
				font-weight: 500;
				font-size: 24rpx;
				color: #666666;
			}

			.distance {
				font-weight: 500;
				font-size: 28rpx;
				color: #333333;
			}
		}
	}

	.bottom {
		position: absolute;
		z-index: 999;
		bottom: -85rpx;
		width: 702rpx;
		// height: 264rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.1);
		border-radius: 16rpx;
		right: 50%;
		/* top: 0; */
		left: 50%;
		transform: translate(-50%, -50%);
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		padding: 24rpx;
	}


	page {
		// height: 100%;
		// background: #f6f6f6;
	}

	.map_container {
		width: 100vw;
		height: 100vh;
	}

	.map {
		width: 100%;
		height: 100%;
	}
</style>